<template>
    <div class="weenkend">
        <h2 class="title">周末去哪儿</h2>
        <ul class="item-list">
            <li class="item border-bottom" v-for="item of WeenkendList" :key="item.id">
                <div class="item-img-wrapper">
                    <img class="item-img" :src="item.imgUrl">
                </div>
                <div class="item-info">
                    <p class="item-title">{{item.title}}</p>
                    <p class="item-desc">{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  name: "HomeWeenkend",
  data() {
    return {
      WeenkendList: [
        {
          id: "01",
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1509/81/0412da9c4db66a.jpg_r_640x214_8e23871e.jpg",
          title: "登高望远秋色佳",
          desc: "山顶满眼彩色，此情此景醉了"
        },
        {
          id: "02",
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg",
          title: "北京必游TOP10",
          desc: "来北京必去的景点非这些地方莫属"
        },
        {
          id: "03",
          imgUrl:
            "http://img1.qunarzz.com/sight/source/1505/9e/21df651e19af5d.jpg_r_640x214_3ea5bb38.jpg",
          title: "寻找北京的皇城范儿",
          desc: "数百年的宫廷庙宇，至今依旧威严霸气"
        }
      ]
    };
  }
};
</script>

<style lang="stylus" scoped>
@import '~styles/mixin.styl';

.weenkend {
    .title {
        height: 0.8rem;
        padding-left: 0.26rem;
        line-height: 0.8rem;
        color: #212121;
    }

    .item {
        position: relative;
        margin-bottom: 0.1rem;
        background: #fff;

        .item-img-wrapper {
            overflow: hidden;
            height: 0;
            padding-bottom: 37.4375%;
        }

        .item-info {
            position: relative;
            padding: 0.14rem 0.2rem 0.2rem 0.2rem;
            box-sizing: border-box;

            .item-title {
                padding-right: 1.4rem;
                color: #212121;
                font-size: 0.28rem;
                line-height: 0.48rem;
                ellipsis();
            }

            .item-desc {
                padding-right: 1.4rem;
                color: #616161;
                font-size: 0.24rem;
                line-height: 0.42rem;
                ellipsis();
            }
        }
    }
}
</style>

